{% extends "admin/base_site.html" %}
{% load i18n %}
{% block bodyclass %}grp-doc{% endblock %}
{% block content-class %}{% endblock %}
{% block title %}Grappelli Documentation &raquo; Groups{% endblock %}

{% block extrahead %}
	<script type="text/javascript" charset="utf-8">
        (function($) {
            $(document).ready(function() {
                $("#grp-content-container .grp-group").grp_collapsible_group();
                $("#grp-content-container .grp-collapse").grp_collapsible({
                    on_init: function(elem, options) {
                        // open collapse (and all collapse parents) in case of errors
                        if (elem.find("ul.errorlist").length > 0) {
                            elem.removeClass("grp-closed")
                                .addClass("grp-open");
                            elem.parents(".grp-collapse")
                                .removeClass("grp-closed")
                                .addClass("grp-open");
                        }
                    }
                });
            });
        })(grp.jQuery);
	</script>
{% endblock %}

{% block breadcrumbs %}
    <ul>
        <li><a href="../">Grappelli Documentation</a></li>
        <li>Groups</li>
    </ul>
{% endblock %}

{% block content %}
    <h1>Groups</h1>
    <div class="g-d-c">
    	<section>
	    	<div class="g-d-24">
		        <div class="grp-doc-description">
		            <h1>Nesting Modules in Groups</h1>
		            <p>A <span class="grp-doc-class">.grp-group</span> encloses <a href="{% url grp_doc_modules %}">modules</a> which belong together or should appear in a more associated way.</p>
		            <p>Usually a group starts with a heading but you might as well use it without one. <br />Just be aware of the fact that groups without headings do not appear in document outlines.</p>
		            <p>There are two different types of groups: <strong>Stacked Groups</strong> and <strong>Tabular Groups</strong>.</p>
		        </div>
		    </div>
		    {% comment %}
	    	<div class="g-d-24">
	    		<div class="grp-doc-code-source">
	    			<div class="grp-group">
	    				<h2>Group</h2>
	    				<div class="grp-module">
		    				<h3>Module</h3>
						    <div class="grp-row"><p>Row</p></div>
						    <div class="grp-row"><p>Row</p></div>
						</div>
						<div class="grp-module">
		    				<h3>Module</h3>
						    <div class="grp-row"><p>Row</p></div>
						    <div class="grp-row"><p>Row</p></div>
						</div>
					</div>
				</div>
		    </div>
	    	<div class="g-d-24">
	    		<div class="grp-doc-code"><pre><code>{% filter force_escape %}
<div class="grp-group">
    <h2>Group</h2>
    <div class="grp-module">
        <h3>Module</h3>
        <div class="grp-row"><p>Row</p></div>
        <div class="grp-row"><p>Row</p></div>
    </div>
    <div class="grp-module">
        <h3>Module</h3>
        <div class="grp-row"><p>Row</p></div>
        <div class="grp-row"><p>Row</p></div>
    </div>
</div>
{% endfilter %}</code></pre></div>
	    	</div>
	    	{% endcomment %}
	    </section>
	    <section>
	    	<div class="g-d-24">
		        <div class="grp-doc-description">
		            <h1>Stacked Groups</h1>
		            <p>A <span class="grp-doc-class">.grp-group</span> with the additional class <span class="grp-doc-class">.grp-stacked</span> carries <a href="{% url grp_doc_modules %}">modules</a> with the default layout (whereas modules in a tabular group appear in a table-like layout).</p>
		        </div>
		    </div>
	    	<div class="g-d-24">
	    		<div class="grp-doc-code-source">
	    			<div class="grp-group grp-stacked">
	    				<h2>Stacked Group</h2>
	    				<div class="grp-module">
		    				<h3>Module</h3>
						    <div class="grp-row"><p>Row</p></div>
						    <div class="grp-row"><p>Row</p></div>
						</div>
						<fieldset class="grp-module">
		    				<h3>Module</h3>
						    <div class="grp-row">
					            <div class="l-2c-fluid l-d-4">
						        	<div class="c-1"><label class="required">Label</label></div>
						            <div class="c-2">
						            	<input type="text" value="" />
							            <p class="grp-help">Helptext</p>
							        </div>
							    </div>
					        </div>
					        <div class="grp-row">
					            <div class="l-2c-fluid l-d-4">
						        	<div class="c-1"><label class="required">Label</label></div>
						            <div class="c-2">
						            	<input type="text" value="" />
							            <p class="grp-help">Helptext</p>
							        </div>
							    </div>
					        </div>
						</fieldset>
					</div>
				</div>
		    </div>
	    	<div class="g-d-24">
	    		<div class="grp-doc-code"><pre><code>{% filter force_escape %}
<div class="grp-group grp-stacked">
    <h2>Stacked Group</h2>
    <div class="grp-module">
        <h3>Module</h3>
        <div class="grp-row"><p>Row</p></div>
        <div class="grp-row"><p>Row</p></div>
    </div>
    <fieldset class="grp-module">
        <h3>Module</h3>
        <div class="grp-row">
            <div class="l-2c-fluid l-d-4">
                <div class="c-1"><label class="required">Label</label></div>
                <div class="c-2">
                    <input type="text" value="" />
                    <p class="grp-help">Helptext</p>
                </div>
            </div>
        </div>
        <div class="grp-row">
            <div class="l-2c-fluid l-d-4">
                <div class="c-1"><label class="required">Label</label></div>
                <div class="c-2">
                    <input type="text" value="" />
                    <p class="grp-help">Helptext</p>
                </div>
            </div>
        </div>
    </fieldset>
</div>
{% endfilter %}</code></pre></div>
	    	</div>
	    	<div class="g-d-24">
		        <div class="grp-doc-description">
		        	<h3>Container for Modules in a Stacked Group</h3>
		            <p>Just in case you want to apply some actions to the modules (e.g. sorting them) you might wrap them with a <span class="grp-doc-class">.grp-items</span>.</p>
		        </div>
		    </div>
		    <div class="g-d-24">
	    		<div class="grp-doc-code"><pre><code>{% filter force_escape %}
<div class="grp-group grp-stacked">
    <h2>Stacked Group</h2>
    <div class="grp-items ui-sortable">
        <fieldset class="grp-module">
            ...
        </fieldset>
        <fieldset class="grp-module">
            ...
        </fieldset>
    </div>
</div>
{% endfilter %}</code></pre></div>
	    	</div>
	    </section>
	    <section>
	    	<div class="g-d-24">
		        <div class="grp-doc-description">
		            <h1>Tabular Groups</h1>
		            <p>A <span class="grp-doc-class">.grp-group</span> with the additional class <span class="grp-doc-class">.grp-tabular</span> carries <a href="{% url grp_doc_modules %}">modules</a> with a table-like layout (whereas modules in a stacked group appear in the default way).</p>
		            <p>To accomplish that table-like structure we have to do a specific nesting the following elements:</p>
		            <ul>
		            	<li>The <span class="grp-doc-dom"><span>table</span></span> is represented by a <span class="grp-doc-class">div.grp-module.grp-table</span></li>
		            	<li>The <span class="grp-doc-dom"><span>thead</span></span> is represented by a <span class="grp-doc-class">div.grp-module.grp-thead</span></li>
		            	<li>Each <span class="grp-doc-dom"><span>tbody</span></span> is represented by a <span class="grp-doc-class">div.grp-module.grp-tbody</span></li>
		            	<li>Each <span class="grp-doc-dom"><span>tr</span></span> is represented by a <span class="grp-doc-class">div.grp-tr</span></li>
		            	<li>Each <span class="grp-doc-dom"><span>th</span></span> is represented by a <span class="grp-doc-class">div.grp-th</span></li>
		            	<li>Each <span class="grp-doc-dom"><span>td</span></span> is represented by a <span class="grp-doc-class">div.grp-td</span></li>
		            </ul>
		            <p>Each <span class="grp-doc-class">div.grp-module.grp-tbody</span> <strong>may not contain a heading</strong> - if there is one you have to hide it!</p>
		        </div>
		    </div>
	    	<div class="g-d-24">
	    		<div class="grp-doc-code-source">
	    			<div class="grp-group grp-tabular">
	    				<h2>Tabular Group</h2>
	    				<div class="grp-module grp-table">
	    					<div class="grp-module grp-thead">
	    						<div class="grp-tr">
	    							<div class="grp-th">Table-Head 1</div>
	    							<div class="grp-th">Table-Head 2</div>
	    						</div>
	    					</div>
	    					<div class="grp-module grp-tbody">
	    						<div class="grp-tr">
	    							<div class="grp-td">Table-Desk 1</div>
	    							<div class="grp-td">Table-Desk 2</div>
	    						</div>
	    					</div>
		    				<div class="grp-module grp-tbody">
	    						<div class="grp-tr">
	    							<div class="grp-td"><input type="text" /></div>
	    							<div class="grp-td"><input type="text" /></div>
	    						</div>
	    					</div>
						</div>
					</div>
				</div>
		    </div>
	    	<div class="g-d-24">
	    		<div class="grp-doc-code"><pre><code>{% filter force_escape %}
<div class="grp-group grp-tabular">
    <h2>Tabular Group</h2>
    <div class="grp-module grp-table">
        <div class="grp-module grp-thead">
            <div class="grp-tr">
                <div class="grp-th">Table-Head 1</div>
                <div class="grp-th">Table-Head 2</div>
            </div>
        </div>
        <div class="grp-module grp-tbody">
            <div class="grp-tr">
                <div class="grp-td">Table-Desk 1</div>
                <div class="grp-td">Table-Desk 2</div>
            </div>
        </div>
        <div class="grp-module grp-tbody">
            <div class="grp-tr">
                <div class="grp-td"><input type="text" /></div>
                <div class="grp-td"><input type="text" /></div>
            </div>
        </div>
    </div>
</div>
{% endfilter %}</code></pre></div>
	    	</div>
	    	<div class="g-d-24">
		        <div class="grp-doc-description">
		        	<h3>Tools for Modules in a Tabular Group</h3>
		            <p>In case you need <a href="{% url grp_doc_tools %}">tools</a> for the <span class="grp-doc-class">div.grp-module.grp-tbody</span> you have to put them in a <span class="grp-doc-class">div.grp-td</span> with the additional class <span class="grp-doc-class">.grp-tools-container</span>.</p>
		            <p>And of course you have to add an empty <span class="grp-doc-class">div.grp-th</span> to the <span class="grp-doc-class">div.grp-module.grp-thead</span> to preserve the table-like structure.</p>
		        </div>
		    </div>
	    	<div class="g-d-24">
	    		<div class="grp-doc-code-source">
	    			<div class="grp-group grp-tabular">
	    				<h2>Tabular Group</h2>
	    				<div class="grp-module grp-table">
	    					<div class="grp-module grp-thead">
	    						<div class="grp-tr">
	    							<div class="grp-th">Table-Head 1</div>
	    							<div class="grp-th">Table-Head 2</div>
	    							<div class="grp-th"></div>
	    						</div>
	    					</div>
	    					<div class="grp-module grp-tbody">
	    						<div class="grp-tr">
	    							<div class="grp-td"><input type="text" /></div>
	    							<div class="grp-td"><input type="text" /></div>
	    							<div class="grp-td grp-tools-container">
	    								<ul class="grp-tools">
										    <li><a href="#" class="grp-icon grp-drag-handler"></a></li>
										    <li><a href="#" class="grp-icon grp-delete-handler"></a></li>
										</ul>
	    							</div>
	    						</div>
	    					</div>
		    				<div class="grp-module grp-tbody">
	    						<div class="grp-tr">
	    							<div class="grp-td"><input type="text" /></div>
	    							<div class="grp-td"><input type="text" /></div>
	    							<div class="grp-td grp-tools-container">
	    								<ul class="grp-tools">
										    <li><a href="#" class="grp-icon grp-drag-handler"></a></li>
										    <li><a href="#" class="grp-icon grp-delete-handler"></a></li>
										</ul>
	    							</div>
	    						</div>
	    					</div>
						</div>
					</div>
				</div>
		    </div>
	    	<div class="g-d-24">
	    		<div class="grp-doc-code"><pre><code>{% filter force_escape %}
<div class="grp-group grp-tabular">
    <h2>Tabular Group</h2>
    <div class="grp-module grp-table">
        <div class="grp-module grp-thead">
            <div class="grp-tr">
                <div class="grp-th">Table-Head 1</div>
                <div class="grp-th">Table-Head 2</div>
                <div class="grp-th"></div>
            </div>
        </div>
        <div class="grp-module grp-tbody">
            <div class="grp-tr">
                <div class="grp-td"><input type="text" /></div>
                <div class="grp-td"><input type="text" /></div>
                <div class="grp-td grp-tools-container">
                    <ul class="grp-tools">
                        <li><a href="#" class="grp-icon grp-drag-handler"></a></li>
                        <li><a href="#" class="grp-icon grp-delete-handler"></a></li>
                    </ul>
                </div>
            </div>
        </div>
        .
        .
        .
    </div>
</div>
{% endfilter %}</code></pre></div>
	    	</div>
	    </section>
	    <section>
	    	<div class="g-d-24">
		        <div class="grp-doc-description">
		            <h1>Collapsible Groups</h1>
		            <p>Both types of groups can also easily be supplied with a collapsible mechanism.</p>
		            <p>To do so just add <span class="grp-doc-class">.grp-collapse</span> to the <span class="grp-doc-class">.grp-group</span> you want to be collapsible.</p>
		            <p>With adding <span class="grp-doc-class">.grp-open</span> or <span class="grp-doc-class">.grp-closed</span> you define whether the collapsible group is opened or closed initially.</p>
		            <p>Now you have to define a <span class="grp-doc-class">.grp-collapse-handler</span>. Usually that's the heading of the collapsible group but you may assign it to other elements as well.</p>
		            <p>Finally you have to use some javascript code (e.g. with the source code below).</p>
		            <p>Feel free to combine collapsible groups with collapsible modules, non-collapsible modules and collapsible ones with groups, collapsible or not.</p>
		        </div>
		    </div>
	    	<div class="g-d-24">
	    		<div class="grp-doc-code-source">
	    			<div class="grp-group grp-collapse grp-open">
	    				<h2 class="grp-collapse-handler">Group</h2>
	    				<div class="grp-module">
		    				<h3>Module</h3>
						    <div class="grp-row"><p>Row</p></div>
						    <div class="grp-row"><p>Row</p></div>
						</div>
						<div class="grp-module grp-collapse grp-open">
		    				<h3 class="grp-collapse-handler">Module</h3>
						    <div class="grp-row"><p>Row</p></div>
						    <div class="grp-row"><p>Row</p></div>
						</div>
					</div>
				</div>
		    </div>
	    	<div class="g-d-24">
	    		<div class="grp-doc-code"><pre><code>{% filter force_escape %}
<div class="grp-group">
    <h2>Group</h2>
    <div class="grp-module">
        <h3>Module</h3>
        <div class="grp-row"><p>Row</p></div>
        <div class="grp-row"><p>Row</p></div>
    </div>
    <div class="grp-module">
        <h3>Module</h3>
        <div class="grp-row"><p>Row</p></div>
        <div class="grp-row"><p>Row</p></div>
    </div>
</div>
{% endfilter %}</code></pre></div>
				<div class="grp-doc-code"><pre><code>{% filter force_escape %}
(function($) {
    $(document).ready(function() {
    	$("#grp-content-container .grp-group").grp_collapsible_group();
        $("#grp-content-container .grp-collapse").grp_collapsible();
    });
})(grp.jQuery);
		    		{% endfilter %}</code></pre></div>
		    	</div>
	    	</div>
	    </section>
    </div>
{% endblock %}

